<template>
  <div class="right">
    <div>
      <strong>下一个方块：</strong>
    </div>
    <table border="1">
      <tr v-for="(tr,r_i) of next_fk" :key="r_i">
        <td v-for="(td,d_i) of tr" :key="d_i" :class="td?`check${td}`:''"><span></span></td>
      </tr>
    </table>

    <div>
      <strong>总耗时：</strong>
      <span>{{ getFormatTime }}</span>
    </div>


    <div>
      <strong>分数：</strong>
      <span>{{ postInfo.score }}</span>
    </div>


    <div>
      <strong>速度：</strong>
      <span>{{ postInfo.speed }}</span>
    </div>

    <div>
      <button type="button" @click="$emit('pauseGame')">暂停游戏</button>
    </div>


  </div>
</template>

<script setup>
import {ref, reactive, watch, computed, onUnmounted} from "vue";

const postInfo = defineProps(["score", "next_fk", "state", "speed"]);

//下一个方块
const next_fk = postInfo.next_fk;
//总耗时
let time = ref(0);

let timer;
onUnmounted(() => {
  clearInterval(timer);
});

watch(() => postInfo.state, (newValue, oldValue) => {
  if (newValue === 1) {
    if (oldValue < 1) {
      time.value = 0;
    }
    timer = setInterval(() => {
      time.value++;
    }, 1000);
  } else if (oldValue === 1) {
    clearInterval(timer);
  }
});

const getFormatTime = computed(() => {
  const value = time.value;
  //获取小时
  let timeH = "";
  let H = Math.floor(value / 3600);
  if (H === 0) {
    timeH = "00:";
  } else if (H > 0 && H < 10) {
    timeH = `0${H}:`;
  } else {
    timeH = `${H}:`;
  }
  //获取分钟
  let timeM = "";
  let M = Math.floor(value % 3600 / 60);
  if (M === 0) {
    timeM = "00:";
  } else if (M > 0 && M < 10) {
    timeM = `0${M}:`;
  } else {
    timeM = `${M}:`;
  }
  //获取秒
  let timeS = "";
  let S = Math.floor(value % 60);
  if (S === 0) {
    timeS = "00";
  } else if (S > 0 && S < 10) {
    timeS = `0${S}`;
  } else {
    timeS = `${S}`;
  }
  return timeH + timeM + timeS;
});

</script>

<style scoped>
table{
  border: transparent;
  background-color: transparent;
  margin-top: 18px ;
}

table td {
  width: 25px;
  height: 25px;
}

.right > div{
  margin-top: 18px;
}

button{
  padding: 4px 8px;
  background-color: #70440b;
  border: navajowhite;
  color: #9fa793;
}

</style>